<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"系统人员"}){} %>
</head>
<body>
<div id="app" class="layui-fluid">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-sm3">

      <div class="layui-card">
        <div class="layui-card-body">
          <t-input-adornment prepend="筛选：">
            <t-input @change="onInput" placeholder="请输入组织名称" clearable></t-input>
          </t-input-adornment>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-body">
          <t-tree v-loading="orgOptions.loading" :data="orgOptions.data" activable hover line :filter="filterOrg" @active="clickTree"></t-tree>
        </div>
      </div>
    </div>

    <div class="layui-col-sm9">
      <div class="layui-card">
        <div class="layui-card-body">
          <t-form :data="queryForm" label-width="calc(5em + 20px)" layout="inline" colon>
            <t-form-item label="人员名称">
              <t-input v-model="queryForm.name" placeholder="输入人员名称" clearable></t-input>
            </t-form-item>
            <t-form-item label="性别">
              <t-select v-model="queryForm.sex" placeholder="选择人员性别" clearable>
                <t-option label="男" :value="1"></t-option>
                <t-option label="女" :value="2"></t-option>
                <t-option label="未知" :value="3"></t-option>
              </t-select>
            </t-form-item>
            <t-form-item label="状态">
              <t-select v-model="queryForm.status" :options="statusOptions" placeholder="选择人员状态" clearable></t-select>
            </t-form-item>
            <t-space>
              <t-button theme="primary" @click="queryData">
                <template #icon><i class="layui-icon layui-icon-search text-size-14 mr-10"></i></template>
                查询
              </t-button>
              <t-button theme="primary" @click="onEdit('')">
                <template #icon><i class="layui-icon layui-icon-add-1 text-size-14 mr-10"></i></template>
                新增
              </t-button>
            </t-space>
          </t-form>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-body">
          <t-table :columns="columns" :data="table.data" :loading="table.loading" bordered hover resizable>
            <template #loading>
              <div class="t-table--loading-message">加载数据中，请稍后...</div>
            </template>
          </t-table>
          <div class="pa-25 pb-15">
            <t-pagination v-model="queryForm.pageNumber" v-model:page-size="queryForm.pageSize" :total="table.totalRow" show-first-and-last-page-btn show-jumper
                          @change="queryData"></t-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const PATH_URL = "sys/person/";
  const ORG_URL = "sys/org/";
</script>
<script>

  setupVue("#app", {
    setup() {

      // 查询表单
      const queryForm = Vue.reactive({ columnField: "id,name,sex,phone,status", pageNumber: 1, pageSize: 10 });
      // 表格相关
      const table = useTable();
      const fetchData = window.reloadData = () => fetchPage(axiosGet, PATH_URL + "page", queryForm, table);
      const queryData = (info = {}) => {
        Vue.nextTick(() => {
          const { current = 1, pageSize } = info;
          queryForm.pageNumber = current;
          if (pageSize) queryForm.pageSize = pageSize;
          fetchData();
        })
      }
      init(() => {
        fetchData();
      })

      // 打开编辑窗口
      const onEdit = (row) => {
        openLayer({
          title: row?.id ? "编辑" : '新增',
          content: PATH_URL + "edit",
          data: { id: row.id },
        });
      }

      const onDetail = (row) => {
        openLayer({
          title: "查看",
          content: PATH_URL + "detail",
          data: { id: row.id },
        });
      }

      // 删除
      const clickDelete = (row) => handleDelete(axiosDelete, PATH_URL + "delete", { id: row.id }, table, "确定删除系统人员吗？", fetchData);

      // 状态选项
      const statusOptions = [{ label: "全部", value: "" }, { label: "启用", value: 1, theme: "success" }, { label: "停用", value: 0, theme: "danger" }];
      // 修改状态
      const modifyStatus = (row) => {
        const statusMsg = row.status === 1 ? '停用' : '启用';
        const status = row.status === 1 ? 0 : 1;
        $baseConfirm("确定要将【" + row.name + "】组织的状态修改为【" + statusMsg + "】吗？", () => {
          req(axiosPut, PATH_URL + "modifyStatus", { id: row.id, status: status }, (res) => {
            if (res.code === 200) row.status = status;
            $baseMsg(res.msg);
          });
        });
      }

      // 表格列表显示
      const columns = [
        { colKey: 'serial-number', align: 'center', title: '', width: "50px" },
        { colKey: 'name', title: '人员名称', align: 'center', width: '150px' },
        { colKey: 'sex', title: '性别', align: 'center', width: '80px', cell: (h, { row }) => row.sex === 1 ? '男' : row.sex === 2 ? "女" : '未知' },
        { colKey: 'phone', title: '手机', align: 'center', width: '150px' },
        {
          colKey: 'status', title: '状态', align: 'center', width: '100px', cell: (h, { row }) => {
            const status = statusOptions.find(item => item.value === row.status);
            if (status) {
              return h(TDesign.Tag, { class: 'pointer', variant: 'light-outline', theme: status.theme, onClick: () => modifyStatus(row) }, status.label)
            } else {
              return h(TDesign.Tag, { class: 'pointer', variant: 'light-outline', theme: 'danger' }, '未知状态')
            }
          },
        },
        {
          title: '操作',
          align: 'center', width: '220px',
          cell: (h, { row }) => {
            return h(TDesign.Space, {}, [
              h(TDesign.Link, { theme: 'primary', onClick: () => onDetail(row) }, '查看'),
              h(TDesign.Link, { theme: 'primary', onClick: () => onEdit(row) }, '编辑'),
              h(TDesign.Link, { theme: 'danger', onClick: () => clickDelete(row) }, '删除'),
            ]);
          },
        },
      ];

      // 组织选项
      const orgOptions = useOptions();
      getSuperior(ORG_URL + "treeOption", { columnField: "id,pid,name" }, orgOptions, true);
      // 组织过滤器
      const filterOrg = Vue.ref(null);
      const onInput = (value) => filterOrg.value = (node) => node.data.label.indexOf(value) >= 0;

      // 树点击
      const clickTree = (values) => {
        const value = values[0];
        if (value === '0') {
          queryForm.orgIdIn = '';
        } else {
          queryForm.orgIdIn = value;
        }
        queryData();
      }

      return {
        queryForm,
        table, columns, queryData,
        onEdit,
        statusOptions,
        orgOptions, clickTree, filterOrg, onInput,
      }
    },
  });
</script>


</body>
</html>
